<!-- 我的工单 -->

<template>
  <div>
    <MySearch />

    <EasyScroll v-if="list.length">
      <MyList @click="openDetail" />
    </EasyScroll>
    <el-empty v-else description="暂无工单" />

    <WebTable v-if="list.length" auto>
      <RowSlot />
    </WebTable>

    <MyDetailRepairApp ref="detail" v-model="easyVisible" :obj="row" @change="refreshList" />
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import store from './store'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'WorkRepair',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixStore(store)],

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(require.context('./', true, /vue$/)),

  /**
   * 状态数据 (函数返回对象)
   */
  data() {
    return {
      easyVisible: false, // 弹窗是否可见
      row: {}, // 行数据
      refDetail: {}, // 详情引用
    }
  },

  /**
   * 监听属性 (深度 deep 首次 immediate)
   */
  watch: {
    /**
     * 监听详情关闭
     */
    easyVisible(easyVisible) {
      !easyVisible && setTimeout(() => (this.row = {}), 300)
    },
  },

  /**
   * 挂载完成 (先抽取再调用)
   */
  mounted() {
    this.refDetail = this.$refs.detail || {}
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 打开详情弹窗
     */
    async openDetail(row) {
      this.row = row
      this.easyVisible = true
    },

    /**
     * 刷新列表
     */
    async refreshList() {
      this.startList()

      // 处理、回退、转派等操作后，工单已不再为自己所有
      const detail = this.refDetail.one || {}
      if (detail.resolverUserId !== CORE.USER.uaaUserId) {
        this.row = {}
        this.easyVisible = false
      }
    },
  },
}
</script>
